<template>
  <view class="tabs" :class="className">
    <scroll-view
        class="scroll-h"
        :scroll-x="true"
        :show-scrollbar="false"
        :scroll-into-view="'scroll_' + scrollInto"
        scroll-with-animation
        :enable-flex="true"
    >
      <view
          v-for="(tab, index) in tabBars"
          :key="tab.id"
          class="uni-tab-item"
          :id="'scroll_' + tab.id"
          :data-current="index"
          @click="ontabtap"
      >
        <up-badge v-if="showBadge && tab.honourCount !== 0" :type="type" max="99" :value="tab.honourCount"/>
        <text
            class="uni-tab-item-title"
            :class="tabIndex == index ? 'uni-tab-item-title-active' : ''">
          {{ tab.name }}
        </text>
      </view>
    </scroll-view>
    <swiper
        :current="tabIndex"
        class="swiper-box"
        :duration="300"
        @change="ontabchange"
    >
      <swiper-item
          class="swiper-item"
          v-for="(tab, index1) in tabBars"
          :key="index1"
      >
        <scroll-view
            v-if="tabIndex == index1"
            class="scroll-v"
            enableBackToTop="true"
            :scroll-y="true"
            @scrolltolower="loadMore(index1)"
        >
          <slot></slot>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>
<script setup>
import {onLoad} from "@dcloudio/uni-app";
import {onMounted, ref, watch,defineEmits} from "vue";

const emits = defineEmits(["on-current-tab", "on-loadmore-tab"]);
const props = defineProps({
  tabBars: {
    type: Array,
    default: [],
  },
  className: {
    type: String,
    default: "",
  },
  current: {
    type: [Number, String],
    default: 0,
  },
  showBadge: {
    type: Boolean,
    default: false
  },
  defaultIndex: {
    type: Number,
    default: 0
  }
});

const tabIndex = ref(0);
const scrollInto = ref('');

watch(
    () => props.current,
    (value) => {
      tabIndex.value = props.tabBars.findIndex((v) => v.id === value);
    },
    {immediate: true, deep: true}
);

function ontabtap(e) {
  let index = e.target.dataset.current || e.currentTarget.dataset.current;
  switchTab(index);
}

function switchTab(index) {
  if (tabIndex.value === index) {
    return;
  }
  tabIndex.value = index;
  scrollInto.value = props.tabBars[index].id;
}

function ontabchange(e) {
  let index = e.target.current || e.detail.current;
  switchTab(index);
  emits("on-current-tab", scrollInto.value);
}

function loadMore(e) {
  // 触底加载数据
  emits("on-loadmore-tab");
}

const type = ref('warning');
const value = ref(2);

onMounted(() => {
  scrollInto.value = props.defaultIndex
})
</script>

<style lang="less">
.tabs {
  flex: 1;
  flex-direction: column;
  /* overflow: hidden; */
  background-color: #fff;
  // height: 30vh;
  position: relative;
  z-index: 9;
  .uni-tab-item {
    position: relative;
    :deep(.u-badge ){
      position: absolute;
      width: 21rpx;
      height: 21rpx;
      line-height: 21rpx;
      text-align: center;
      right: 5rpx;
      text {
        width: 100%;
      }
    }
  }

  &.administration {
    .scroll-h {
      background: @mutual-img;
      background-size: 100% 100%;
      padding-top: 100rpx;
      padding-bottom: 50rpx;

      .uni-tab-item-title {
        color: #fff;
      }

      .uni-tab-item-title-active {
        color: #fff;
        font-size: 32rpx;
        font-weight: bold;
      }
    }

    .swiper-box {
      background: #f7f8fd;
      z-index: 1000;
    }
  }
}

.scroll-h {
  /* #ifdef H5 */
  width: 100%;
  /* #endif */
  height: 100rpx;
  flex-direction: row;
  /* #ifndef APP-PLUS */
  white-space: nowrap;
  /* #endif */
  position: sticky !important;
  z-index: 999;
  top: var(--window-top);
  white-space: nowrap;
  text-align: center;
  background-color: #fff;
}

.uni-tab-item {
  display: inline-block;
  flex-wrap: nowrap;
  padding-left: 34rpx;
  padding-right: 34rpx;
}

.uni-tab-item-title {
  color: #555;
  font-size: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  flex-wrap: nowrap;
}

.uni-tab-item-title-active {
  padding: 6px 0;
  // color: #00B588;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom: 10rpx solid #00B588;
  font-weight: bold;

}

.swiper-box {
  flex: 1;
  // height: calc(100vh - var(--window-bottom) - var(--window-top));
  // height:16vh;
}

.swiper-item {
  flex: 1;
  flex-direction: row;
}

.scroll-v {
  flex: 1;
  width: 100%;
  height: 100%;
}

.loading-more {
  align-items: center;
  justify-content: center;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}

.loading-more-text {
  font-size: 28rpx;
  color: #999;
}
</style>
